<script setup lang="ts">
import type {
  SysDeptPageQo,
  SysDeptTreeVo,
} from '#/system/dept'
import type {
  SysUserVo,
} from '#/system/user'
import {
  deleteSysDeptApi,
  disableSysDeptApi,
  enableSysDeptApi,
  getSysDeptTreeApi,
} from '@/api/system/dept'
import {
  getSysUserListApi,
} from '@/api/system/user'
import { CirclePlus, Edit } from '@element-plus/icons-vue'
import Details from './details.vue'

defineOptions({
  name: 'SystemDept',
})

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    label: '名称',
    prop: 'name',
    align: 'center',
    width: 200,
  },
  {
    label: '编码',
    prop: 'code',
    align: 'center',
  },
  {
    label: '机构类型',
    prop: 'deptType',
    align: 'center',
    type: 'dict',
    dictType: 'dept_type',
  },
  {
    label: '状态',
    prop: 'status',
    align: 'center',
    type: 'dict',
    dictType: 'status',
  },
  {
    label: '机构排序',
    prop: 'deptRank',
    align: 'center',
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    type: 'slot',
    width: 200,
  },
]

const detailsRef = $ref<InstanceType<typeof Details>>()
let selectionList = $ref<string[]>([])
let tableData = $ref<SysDeptTreeVo[]>([])
let userList = $ref<SysUserVo[]>([])
let loading = $ref(false)

// 搜索
const [search, resetClk] = useResetState<SysDeptPageQo>(
  { },
  () => {
    loadedTable()
  },
)

// 打开对话框
async function openDialog(action: DialogAction, id?: string) {
  if (!detailsRef)
    return
  const { type } = await detailsRef?.showDialog({
    title: `${DialogActionMap[action]}菜单`,
    action,
    model: {
      id,
    },
    userList,
  })
  if (!type)
    return
  loadedTable()
}

function loadedTable() {
  loading = true
  getSysDeptTreeApi(search).then((res) => {
    tableData = res.data
    loading = false
  })
}

async function getSelectList() {
  await Promise.all([
    getUserList(),
  ])
}

async function getUserList() {
  const res = await getSysUserListApi({
    status: 1,
  })
  userList = res.data
}

// 删除
const [deleteBatch] = useDeleteBatch($$(selectionList), deleteSysDeptApi, () => {
  loadedTable()
  selectionList = []
})
// 启用
const [enable] = useEnable($$(selectionList), enableSysDeptApi, () => {
  loadedTable()
  selectionList = []
})
// 禁用
const [disable] = useDisable($$(selectionList), disableSysDeptApi, () => {
  loadedTable()
  selectionList = []
})

onMounted(async () => {
  loadedTable()
  await getSelectList()
})
</script>

<template>
  <div
    un-flex="~ col"
    un-h="full"
  >
    <el-card
      un-m-b="2.5"
      body-style="height: 100%;"
      style="overflow: visible;"
    >
      <el-form
        :inline="true"
        :model="search"
        un-grid="~ cols-4"
        class="single-row-search-form"
      >
        <el-form-item label="编码" prop="title">
          <el-input v-model="search.code" placeholder="请输入机构编码" clearable />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="search.name" placeholder="请输入机构名称" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <sy-dict
            v-model="search.status"
            dict-type="status"
            placeholder="请选择状态"
            type="select"
          />
        </el-form-item>
        <el-form-item>
          <sy-search-button @search="loadedTable" @reset="resetClk" />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card
      un-h-full
      body-style="height: 100%;"
    >
      <sy-table
        v-model:selection="selectionList"
        row-key="id"
        height="100%"
        border
        selection-chenge-use="id"
        add-btn-perms="dept:add"
        delete-btn-perms="dept:delete"
        :show-pagination="false"
        :columns="columns"
        :loading="loading"
        :data="tableData"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren', checkStrictly: false }"
        @click-del="deleteBatch"
        @click-add="openDialog('add')"
      >
        <template #header="{ disabled }">
          <el-button
            v-auth="'dept:enabled'"
            plain
            type="primary"
            :disabled
            @click="enable"
          >
            启用
          </el-button>
          <el-button
            v-auth="'dept:disable'"
            plain
            type="danger"
            :disabled
            @click="disable"
          >
            禁用
          </el-button>
        </template>
        <template #icon="{ row }">
          <sy-icon v-if="row.icon" :icon="row.icon" />
        </template>
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            @click="openDialog('add', row.id)"
          >
            <template #icon>
              <el-icon>
                <CirclePlus />
              </el-icon>
            </template>
            新增
          </el-button>
          <el-button
            v-auth="'dept:edit'"
            link
            type="primary"
            @click="openDialog('edit', row.id)"
          >
            <template #icon>
              <el-icon>
                <Edit />
              </el-icon>
            </template>
            编辑
          </el-button>
        </template>
      </sy-table>
    </el-card>
    <Details ref="detailsRef" />
  </div>
</template>

<style scoped></style>
